<template>
    <qrcode-vue :value='value' :size='size' level='H' @click='download' ref='dom' class='qrcode' title='点击下载'/>
</template>

<script lang='ts'>
import { defineComponent, reactive, ref, toRefs } from 'vue'
import QrcodeVue from 'qrcode.vue'

export default defineComponent({
    props: {
        value: {
            type: String,
            require: true
        },
        size: {
            type: Number,
            default: 100
        }
    },
    components: {
        QrcodeVue
    },
    setup(props) {
        console.log(props.value)
        const state = reactive({
            value: props.value,
            size: props.size
        })
        const dom = ref()
        const downLoadQRcode = (): void => {
            const canvas = dom.value.$el
            const url = canvas.toDataURL('image/png')
            const aDom = document.createElement('a')
            aDom.download = 'qrcode'// 设置下载的文件名
            aDom.href = url
            document.body.appendChild(aDom)
            aDom.click()
            aDom.remove()
        }
        return {
            ...toRefs(state),
            dom,
            download: downLoadQRcode
        }
    }
})
</script>

<style scoped>
.qrcode:hover {
    cursor: pointer;
}
</style>
